<template>
    <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal='false'
        class="companies-dialog"
        width="800px">
        <section class="dialog-body">
            <el-tabs v-model="subjectLevel" class="tab">
                <el-tab-pane label="新增二级科目" name="2">
                    <el-form
                        label-position="top"
                        ref="form"
                        :inline="true"
                        label-width="170px"
                        size="mini"
                        class="form-section">
                        <el-form-item label="一级科目">
                            <el-select
                                v-model="firstLevelSubject[subjectLevel]"
                                filterable
                                remote
                                reserve-keyword
                                default-first-option
                                 @focus="getFirstLevelSubject"
                                :remote-method="getFirstLevelSubject"
                                :loading="loading">
                                    <el-option
                                        v-for="item in firstOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级科目">
                            <el-input v-model="newSubject[subjectLevel]"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="新增三级科目" name="3">
                    <el-form
                        label-position="top"
                        ref="form"
                        :inline="true"
                        label-width="170px"
                        size="mini"
                        class="form-section">
                        <el-form-item label="一级科目">
                            <el-select
                                v-model="firstLevelSubject[subjectLevel]"
                                filterable
                                remote
                                reserve-keyword
                                default-first-option
                                @focus="getFirstLevelSubject"
                                :remote-method="getFirstLevelSubject"
                                :loading="loading">
                                    <el-option
                                        v-for="item in firstOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级科目">
                           <el-select
                                v-model="secondLevelSubject[subjectLevel]"
                                filterable
                                remote
                                reserve-keyword
                                default-first-option
                                :remote-method="getSecondLevelSubject"
                                @focus="getSecondLevelSubject"
                                :loading="loading">
                                    <el-option
                                        v-for="item in secondOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="三级科目">
                        <el-input v-model="newSubject[subjectLevel]"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <span v-if="alert" style="color:red; text-align:center;"> 没有可选择科目, 请更换1级科目或选择添加2级科目 </br></span>
        <span>备注：</br>
            1. 科目编号将由系统自动生成，生成后可于列表内查看；</br>
            2. 末级科目可自行编辑名称，其余科目可在现有范围内选择</span>
        </section>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="submit" size="mini">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import map, { urbanTaxRateList } from '@/components/map.js';
import utiles from '@/components/utiles.js';
import 'element-ui/lib/theme-chalk/upload.css';

export default {
    components: {
    },
    mounted(){
    },
    data() {
        return {
            firstOptions:[],
            secondOptions:[],
            subjectLevel: "2",
            firstLevelSubject:[],
            secondLevelSubject:[],
            newSubject:[],
            loading:false,
            secondSubject:"",
            thirdSubject: "",
            dialogVisible: false,
            subjectOptions: map.subjectsList,
            saveBtnLoading: false,
            firstSubjectOptions:[],
            secondSubjectOptions:[],
            thirdSubjectOptions:[],
            alert:false,
        };
    },
    methods: {
        getFirstLevelSubject(query){
                this.$http.get("/subject/nameList", {params:{
                    bName:this.bName,
                    level:1,
                    subjectName:""
                }}).then((res) => {
                    if (res.code == 0) {
                        this.firstOptions = res.data.subjectNameList.filter(itemValue => {
                            if (query != '' && typeof(query) == "string"){
                                return itemValue.indexOf(query) > -1;
                            }
                            return true;
                        }).map((eleValue, index) => {
                            return {key:index, value:eleValue, label:eleValue};
                        });
                    } else {
                        this.firstOptions = []
                    }
                })
        },

        getSecondLevelSubject(query){
             this.$http.get("/subject/nameList", {params:{
                bName:this.bName,
                level:2,
                subjectName:this.firstLevelSubject[this.subjectLevel]
            }}).then((res) => {
                if (res.code == 0){
                    this.secondOptions = res.data.subjectNameList.filter(itemValue => {
                            if (query !== '' && typeof(query) == "string"){
                                return itemValue.indexOf(query) > -1;
                            }
                            return true;
                        }).map((eleValue, index) => {
                        return {key:index, value:eleValue, label:eleValue};
                    });
                } else {
                    this.secondOptions = []
                };
                if (this.secondOptions.length == 0){
                    this.secondLevelSubject[this.subjectLevel] = "";
                    this.alert=true;
                    setTimeout(() => {
                        this.alert=false;
                    }, 3000);
                }
                
 
                
            })
        },
        postData(){
            let newSubjectParam;
            switch (this.subjectLevel) {
                case "2":
                    newSubjectParam = this.firstLevelSubject[this.subjectLevel] + "-" + this.newSubject[this.subjectLevel];
                    break;
                default:
                    newSubjectParam = this.firstLevelSubject[this.subjectLevel] + "-" + this.secondLevelSubject[this.subjectLevel] + "-" + this.newSubject[this.subjectLevel];
                    break;
            }
            this.$http.post("/subject/add", {
                bName:this.bName,
                level:parseInt(this.subjectLevel),
                subjectName:newSubjectParam,
            }).then(res => {
                if (res.code == 0){
                    this.$message.success("更新成功");
                    this.$emit("modify", "modify successfully");
                } else {
                    this.$message.error("更新失败:", res.message);
                }
            })
        },
        /**
         * 打开弹框
         */
        open() {
            this.dialogVisible = true;
        },

        /**
         * 点击确定后的提交操作
         */
        submit() {
            this.postData();
            this.dialogVisible = false;
        },
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/var.less';
.dialog-body {
    max-height: 500px;
    padding: 0 30px;
    overflow: auto;
}
.form-section {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
        flex: 2;
        min-width: 30%;
        max-width: 30%;
        .el-select,
        .el-upload {
            display: block;
        }
    }
}
.suppliers-and-customers {

    .explain {
        padding-bottom: 5px;
        color: @color-grey-low;
        font-size: 12px;
        line-height: 1.2em;
    }

    .table-container {
        display: flex;
        .suppliers,
        .customers {
            flex: 0 0 360px;
            margin-right: 5px;
        }
        .add-btn {
            float: right;
            margin-top: 5px;
        }
    }
}

</style>
<style lang="less">
.companies-dialog .el-dialog__body {
    padding: 0;
}

.search-industry-autocomplete {
    background: white;
    border-radius: 3px;
    border: 1px solid rgb(248, 245, 245);
    margin-top: 0 !important;
    div{
        max-height: 200px;        
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            border: 1px solid rgb(247, 244, 244);
            list-style-type: none;
            margin:0px;
            padding-left: 0;
            &:hover, &.highlighted {
                background: rgba(235, 232, 232, 0.9);
                cursor:pointer;
            }
        }
    }
}
</style>
